import React, { useState } from "react";

import { Layout, Menu, Breadcrumb } from "antd";
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from "@ant-design/icons";
import { Redirect, Route, Switch } from "react-router-dom";
import { fileInfoPath } from "../../../../routers/index";

const { SubMenu } = Menu;
const { Content, Sider } = Layout;

function FileInfo(props) {
  //路径显示
  const [breadcrumb, setBreadcrum] = useState();
  //侧边导航跳转
  const goToPage = (value) => {
    setBreadcrum(value.keyPath[1]);
    props.history.push(value.key);
  };
  return (
    <Layout>
      <Sider width={200} className="site-layout-background">
        <Menu
          mode="inline"
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={["sub1"]}
          style={{ height: "100%", borderRight: 0 }}
        >
          <SubMenu key="统计数据" icon={<UserOutlined />} title="统计数据">
            <Menu.Item
              key="/admin/manager/fileinfo/summary"
              id="FileInfoMenu_1_1"
              onClick={goToPage}
            >
              数据概览
            </Menu.Item>
            <Menu.Item key="/admin/manager/fileinfo/userdowninfo" id="FileInfoMenu_1_2" onClick={goToPage}>
              用户下载量
            </Menu.Item>
          </SubMenu>
          <SubMenu key="文件上传" icon={<LaptopOutlined />} title="文件上传">
            <Menu.Item key="/admin/manager/fileinfo/uploadfile" onClick={goToPage}>
              文件上传
            </Menu.Item>
          </SubMenu>
          <SubMenu
            key="文件下载"
            icon={<NotificationOutlined />}
            title="文件下载"
          >
            <Menu.Item key="/admin/manager/fileinfo/PointCity" onClick={goToPage}>
              文件筛选
            </Menu.Item>
            {/* <Menu.Item key="/admin/manager/fileinfo/pointtype" onClick={goToPage}>
              按类别选取
            </Menu.Item> */}
          </SubMenu>
        </Menu>
      </Sider>
      <Layout style={{ padding: "0 24px 24px" }}>
        <Breadcrumb style={{ margin: "16px 0" }}>
          <Breadcrumb.Item>管理员</Breadcrumb.Item>
          <Breadcrumb.Item>文件管理</Breadcrumb.Item>
          <Breadcrumb.Item>{breadcrumb}</Breadcrumb.Item>
        </Breadcrumb>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
          <Switch>
            {fileInfoPath.map((item) => {
              return (
                <Route
                  key={item.path}
                  path={item.path}
                  exact={item.exact}
                  render={(routeProps) => {
                    return <item.component {...routeProps} />;
                  }}
                />
              );
            })}
            <Redirect to="/admin/manager/fileinfo/summary" from="/admin/manager/fileinfo"/>
          </Switch>
        </Content>
      </Layout>
    </Layout>
  );
}

export default FileInfo;
